<template>
  <div class="html">
    <setting-header :num="num"></setting-header>

    <!--中间的主体部分-->
    <div class="body">
      <form>
          <!--左边填写信息的部分-->
        <div class="body-left floatLeft">
          <form>
            <!--邮件部分-->
            <div class="email">
              <span class="title block">Email</span>
              <input type="text" class="messeage" placeholder="bjsunhe@sina.com"/>
              <span class="text block">Unverified <a href="javascript:(viod)">Re-send verification email</a></span>
            </div>
            <!--密码部分-->
            <div class="password">
              <span class="title block">Password</span>
              <input type="button" value="Change password" class="button"/>
            </div>
            <!--确认密码部分-->
            <div class="currentPassword">
              <span class="title block">Current Password</span>
              <input type="text" class="messeage"/>
              <span class="text block">Enter your current password to save these changrs.</span>
            </div>
            <input type="submit" value="Save settings" class="button save"/>
          </form>
        </div>
        <!--右边的文字部分-->
        <div class="body-right floatLeft">
          <!--following-->
          <span class="name block">Following</span>
          <span class="link block"><a href="javascript:(viod)">Opt out of Following</a></span>
          <!--facebook-->
          <span class="name block">Facebook</span>
          <span class="link block"><a href="javascript:(viod)">Disconnect this account from Facebook</a></span>
          <!--security-->
          <span class="name block">Security</span>
          <span class="link block">
            <a href="javascript:(viod)">Verify your email to enable two-factor authentication<br/>Log me out on all other devices<br/>Log me out of the iOS App</a>
          </span>
          <!--Delete Account-->
          <span class="name block">Delete Account</span>
          <span class="link block"><a href="javascript:(viod)">Delete my Kickstarter account</a></span>
        </div>
        <div class="clear"></div>
      </form>
      <!--登陆历史部分-->
      <div class="loginHistory">
        <span class="loginHistory-title block">Login History</span>
        <span class="loginHistory-text block">This feather provides information about your account usage and other related changes.If you see any suspicious activity,change your password immediately.</span>
       <!--分类-->
        <ul class="classification">
          <li class="lineBlock">Activity</li>
          <li class="lineBlock">Time</li>
          <li class="lineBlock">Location</li>
          <li class="lineBlock">IP Address</li>
        </ul>
        <!--分类事例-->
        <div class="example">
          <ul>
            <li class="lineBlock">You loggedvia Facebook</li>
            <li class="lineBlock">Mon,February 12 2018 5:24 PM AWST</li>
            <li class="lineBlock">Fremont,94536,US</li>
            <li class="lineBlock">45.79.72.58</li>
          </ul>
        </div>
        <input type="button" value="Load more" class="loadMore"/>
      </div>
    </div>
    <setting-footer></setting-footer>
  </div>
</template>

<script>
  import settingHeader from '../public/SettingHeader'
  import settingFooter from '../public/SettingFooter'

    export default {
        name: "seting-account-kickstarer",
        components:{ settingHeader, settingFooter },
        data(){
            return{
              num: '',
            }
        },
        created(){
            this.num = 0;
        }
    }
</script>

<style scoped lang="scss">
  /*中间的主体部分*/
  .body{
    padding: 36px 0 0 200px;
    box-sizing: border-box;
    box-shadow: 0 2px 0 0 #DDDDDD;
  }
  /*公共样式*/
  .clear{clear: both;}
  .block{display: block}
  .lineBlock{display: inline-block}
  input{outline: none;}
  a{text-decoration: none}
  .floatLeft{float: left}
  .name{
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #2E2E2E;
  }
  .text{
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #2E2E2E;
  }
  form{
    width: 1040px;
    height:453px;
    border-bottom: 2px solid #DDDDDD;
  }
  /*中间左边的填写信息部分*/
  .body-left{
    font-family: PingFangSC-Regular;
    color: #FFFFFF;
    font-size: 14px;
    width: 408px;
    .title{
      color: #2E2E2E;
      font-family: PingFangSC-Semibold;
    }
    input{font-size: 14px}
    .button{color: #ffffff}
    /*邮件部分*/
    .email{
      margin-bottom: 28px;
      .messeage{
        width: 408px;
        line-height: 43px;
        padding-left:13px;
        box-sizing: border-box;
        margin-top: 7px;
        color: #2E2E2E;
      }
    }
    /*密码部分*/
    .password{
      input{
        background: #3D3E63;
        width: 123px;
        height: 34px;
        font-size: 12px;
        margin: 7px 0 28px 0;
      }
    }
    /*确认密码部分*/
    .currentPassword{
      .messeage{
        width: 395px;
        height: 43px;
        margin-top: 7px;
        padding-left:13px;
      }
      .text{color: #2E2E2E;}
    }
    .save{
        margin-top: 14px;
        width: 131px;
        height: 38px;
        background: #2C59F6;
    }
  }
  /*右边的文字部分*/
  .body-right{
    margin-left: 314px;
    width: 261px;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    a{
      text-decoration: none;
      color: #2C59F6;
    }
    .name{
      color: #2E2E2E;
      margin-top: 28px;
    }
    .name:nth-child(1){margin-top: 0;}
    .name:nth-child(4){
      margin-top: 37px;
    }
    .link{color: #2C59F6;}
  }
  /*登陆历史部分*/
  .loginHistory {
    color: #2E2E2E;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    .loginHistory-title {
      font-size: 22px;
      margin: 49px 0 21px 0;
    }
    .loginHistory-text {
      width: 1040px;
      margin-bottom: 23px;
    }
    li {list-style: none;}
    /*分类*/
    .classification {
      height: 22px;
      line-height: 22px;
      margin-bottom: 10px;
      li:nth-child(1) {margin-right: 394px;}
      li:nth-child(2) {margin-right: 234px;}
      li:nth-child(3) {margin-right: 183px;}
    }
    /*分类事例*/
    .example {
      height: 70px;
      width: 1041px;
      border-top: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      ul {
        width: 1100px;
        li {
          margin: 16px 0 34px 0;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #2E2E2E;
          height: 40px;
          vertical-align: middle;
        }
        li:nth-child(1) {
          margin-right: 290px;
        }
        li:nth-child(2) {
          margin-right: 62px;
          width: 210px;
        }
        li:nth-child(3) {
          margin-right: 39px;
          width: 210px;
        }
      }
    }
  }
  .loadMore{
    width: 112px;
    height: 38px;
    background: #3D3E63;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #FFFFFF;
    margin: 23px 0 121px 0;
  }
</style>
